<template>
  <div class="content-wrapper">
    <div class="fs-24 f-bold f-primary mt-20 mb-30">案例4：福州华榕智慧停车上云改造</div>
    <div class="flex-row">
      <div class="left-row flex-1 pr-20">
        <div class="section-title flex-row flex-row-center pl-20 pr-20 pt-30 pb-30 mb-20">
          <div class="text-center ml-20 mr-40 w100">
            <img src="@/assets/images/icon/ic-case01.png" alt="">
            <div class="fs-20 f-primary f-bold lh-28" >业务挑战</div>
          </div>
          <div class="fs-14 f-normal lh-28 flex-1">
            <div><span class="f-bold">客户名称：</span>{{name}} </div>
            <div><span class="f-bold">上云类型：</span>{{type}}</div>
            <div><span class="f-bold">案例概况：</span>{{survey}}</div>
          </div>
        </div>
        <div class="section-title flex-row flex-row-center  pl-20 pr-20 pt-30 pb-30 mb-20">
          <div class="text-center ml-20 mr-40 w100">
            <img src="@/assets/images/icon/ic-case02.png" alt="">
            <div class="fs-20 f-primary f-bold lh-28" >解决方案</div>
          </div>
          <div class="fs-14 f-normal lh-28 flex-1">
            <div><span class="f-bold">服务方案：</span>{{plan}}</div>
            <div><span class="f-bold">支撑内容：</span>{{content}}</div>
          </div>
        </div>
        <div class="box text-center">
          <img :src="img" class="mt-30 mb-30">
        </div>
      </div>
      <div class="left-row flex-1 pl-20">
        <div class="section-title"><svg-icon iconName="biaoti2" class="mr-10"></svg-icon>客户需求</div>
        <div class="box h-box mt-20 mb-20">
          <div class="f-normal fs-14" style="width: 460px">
            <div class="mb-30">{{need}}</div>
            <div>{{need2}}</div>
          </div>
          <img class="bg" src='@/assets/images/case/bg-1.png'/>
        </div>
        <div class="section-title "><svg-icon iconName="biaoti2" class="mr-10"></svg-icon>案例价值</div>
        <div class="box h-box mt-20  mb-20">
          <div class="fs-24 f-primary " style="width: 480px">{{worth}}</div>
          <img class="bg" src='@/assets/images/case/bg-2.png' width="300"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'index',
    data () {
      return {
        img:require('../../../assets/images/case/pic-4.png'),
        name: '福建福州华榕集团',
        type: '云化改造（ L2级别上云）',
        survey: '华榕集团联合中国电信福建公司研发了“福州城市大脑智慧停车系统”，解决停车难、离场难、缴 费难等城市停车痛点，依托“e福州”APP打通主流支付渠道，服务当地市民。',
        plan: 'IaaS采用电信天翼云，PaaS采用集团TelePG和开源组件，去IOE。构建异地双机房数据库双活架构，实现业务持续对外服务能力。自动化部署降低部署成本，实现无感发布，降低发布更新风险。',
        content: '以停车云平台+天翼云+基础网+安全的整合方案，及云网能力的跨地域复制的方式组合现有能力中台，基于集团PaaS组件-TelePG数据库异地双活，实现应用云化统一运维管理、异地项目纳管。',
        need: '停车系统涉及广大市民停车和出行，系统稳定性要求极高，需高可用高容灾。 ',
        need2: '业务需求需快速交付且在线无感发布。 ',
        worth: '福州华榕智慧停车系统上线运营后，接入公共停车泊位近5万个，服务车辆150余万辆、用户超百万。云网融合全链条可控，依托成熟网络聚合多种物联网设备，是天翼云数据库行业生态应用的新突破，成为“数字福建”、“智慧福州”建设发展进程中的重要实践经验。'
      }
    }
  }
</script>

<style scoped lang="scss">
  .content-wrapper:after{
    content: '';
    width: 1920px;
    height: 1080px;
    position: fixed;
    top:0;
    left: 0;
    z-index: -1;
    background: url("~@/assets/images/case/bgline.png") no-repeat bottom;
    background-size: 100%;
  }
  .box{
    padding: 30px 40px;
    background: #101010;
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    &.h-box{
      height: 200px;
    }
    .bg{
      position: absolute;
      bottom: 20px;
      right: 20px;
    }
  }
  .lh-28{
    line-height: 28px!important;
  }
  .w100{
    width: 100px;
  }
</style>
